 <template>
  <div  class="container" >
      <div class="ic" v-for="n in types" :key="n">
      <Icon :type="n"></Icon>
      <table>{{n}}</table>
      </div>
      
  </div>
</template>

<script>
import Icon, {types} from './index.vue';

export default {
data(){
    return{
        types,
    }
},
 
    components: { Icon }
}
</script>

<style lang="less" scoped>

.container{
    
    width: 600px;
    display: flex;
    justify-content: center;
    align-items:center ;
    margin:30px 0;
     flex-wrap: wrap;
     margin:50px auto;
}
.ic{
    margin:20px 20px;
    text-align: center;
    
    table{
     margin: 10px 0;

    }
}
</style>